<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" href="../static/css/nav.css" th:href="@{/css/nav.css}">
    <link rel="stylesheet" href="../static/css/video.css" th:href="@{/css/video.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>

    <div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;background-color: white;width: 100%" th:replace="nav::nav">

</div>
    <div class="vedio-outer">
        <div class="vedio-container">
            <div class="upload-tab">
                <a href="#" class="active">上传视频</a>
            </div>
            <div class="upload-area">
                <form id="videoUploadForm" action="/videos/add" method="POST" enctype="multipart/form-data">
                    <div class="upload-placeholder">
                        <i class=" cloud   iconfont" style="color: #e6dcdc; opacity: 0.4;">&#xe615;</i>
                        <p>拖拽视频到此或点击上传</p>
                        <input type="file" id="videoUpload" name="file" accept="video/*" style="display: none;">
                        <input type="hidden" id="videoPath" name="videoPath" value="">
                        <button id="uploadButton" type="button">上传视频</button>
                    </div>
                </form>
            </div>
        </div>


        <div class="video-params">
            <div class="param-item">
                <p class="param-title">视频大小</p>
                <p class="param-desc">时长和大小均不限<br>推荐上传大小为 5G 以内</p>
            </div>
            <div class="param-item">
                <p class="param-title">视频分辨率</p>
                <p class="param-desc">最大支持 1080P<br>分辨率超过 1920 *1080，会被压缩为 1920 *1080</p>
            </div>
            <div class="param-item" style="border: none;">
                <p class="param-title">视频格式</p>
                <p class="param-desc">支持常用视频格式<br>推荐使用 mp4</p>
            </div>
        </div>

    </div>

<div class="mask">
    <div class="flex-center">
        <div class="loading three-balls-bounce">
           <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="shadow"></div>
            <div class="shadow"></div>

        <div class="shadow"></div>
    </div>

</div>
<script th:inline="javascript">

    document.addEventListener('DOMContentLoaded', function () {
        const uploadButton = document.getElementById('uploadButton');
        const videoUpload = document.getElementById('videoUpload');
        const videoPreview = document.getElementById('videoPreview');
        const uploadPlaceholder = document.querySelector('.upload-placeholder');
        const deleteButton = document.getElementById('deleteButton');
        const mask = document.querySelector('.mask');

        uploadButton.addEventListener('click', function () {
            videoUpload.click();
        });

        videoUpload.addEventListener('change', function (e) {
            e.preventDefault(); // 阻止默认提交
            const file = e.target.files[0];

            // **新增校验：文件是否为空**
            if (!file) {
                showCustomAlert('请选择要上传的视频文件', 3000);
                return; // 终止后续操作
            }

            // 原有文件大小校验
            const maxSize = 5 * 1024 * 1024 * 1024;
            if (file.size > maxSize) {
                showCustomAlert('视频文件大小不能超过5GB', 3000);
                return;
            }

            mask.style.display = 'flex';
            document.getElementById('videoUploadForm').submit();
            document.getElementById('videoUpload').value=''
        });



        function showCustomAlert(message, duration) {
            let customAlert = document.getElementById('customAlert');
            if (!customAlert) {
                div_outter = document.createElement('div');
                customAlert = document.createElement('div');
                customAlert.id = 'customAlert';
                // customAlert.style.margin='7px 12px';
                const alertMessage = document.createElement('p');
                alertMessage.id = 'alertMessage';
                customAlert.appendChild(alertMessage);

                document.body.appendChild(customAlert);
            }

            const alertMessage = document.getElementById('alertMessage');

            alertMessage.textContent = message;
            if (alertMessage.textContent == null) {
                customAlert.style.display = 'none';
            }

            customAlert.style.display = 'block';
            setTimeout(() => {
                customAlert.style.display = 'none';
            }, duration);
        }

    });
    let mainPage=document.getElementsByClassName('mainPage')[0]
    mainPage.addEventListener('click',()=>{
        event.preventDefault();
        window.location.href='http://localhost:8080/mainPageRecommend'
    })
    let personalMainPage=document.getElementsByClassName('personalMainPage')[0]
    console.log(personalMainPage)
    personalMainPage.addEventListener('click',()=>{
        event.preventDefault();
        window.location.href='http://localhost:8080/userHomepage'
    })
    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }
    let errorMessage = [[${errorMessage}]];
    if (errorMessage && errorMessage !== '') {
        showCustomAlert(errorMessage, 3000);
    }
</script>
    <script src="../static/js/video.js" th:src="@{/js/video.js}"></script>
</body>

</html>